[#assign menucode="productPay"]
[#assign ispurchaser = Session.currentRole.roleType == 1]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <title>财务管理</title>
    <link href="/res/css/respective/order/back-order.css" rel="stylesheet">
    <style type="text/css">
        td[rowspan]{
            border-left: 1px solid #ebebeb;
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="warp">
[#include "/front/common/front_headAzt.html"]
    <div class="backcontent">
    [#include "/front/common/front_leftAzt.html"]

        <div class="back-main">
            <div class="inner">
                <div class="title">商品交易款</div>
                <div class="backTab">
                    <ul>
                       	<li [#if queryParam.tab == 1]class="on"[/#if] data-tab="1">[#if ispurchaser]待支付[#else]应收款[/#if][#if unPayedCount > 0]<span class="orange"><i></i>${unPayedCount!}</span>[/#if]</li>
                       	<li [#if queryParam.tab == 2]class="on"[/#if] data-tab="2">[#if ispurchaser]已支付[#else]已收款[/#if][#if payedCount > 0]<span class="orange"><i></i>${payedCount!}</span>[/#if]</li>
                       	[#if ispurchaser]<li [#if queryParam.tab == 3]class="on"[/#if] data-tab="3">支付失败 [#if failCount > 0]<span class="orange"><i></i>${failCount!}</span>[/#if]</li>[/#if]
                    </ul>
                </div>
                <form id="orderPayForm" action="/order/pay/product" method="get">
	                <!-- 当前页码 -->
	                <input type="hidden" id="pageNo" name="pageNo" value="${page.pageNum!}">
	                <!-- 订单tab -->
	                <input type="hidden" id="tab" name="tab" value="${queryParam.tab!}">
	                <div class="back-status"> 
	                    <input style="width: 175px;" type="text" id="keyword" name="keyword" value="${queryParam.keyword!}" placeholder="请输入商品名称/订单编号" class="orderInput orderInput1" />
	                    <span>  
	                    	<label>[#if ispurchaser]卖[#else]买[/#if]家名称：</label>
	                    	<input type="text" class="orderInput orderInput2"
			                     [#if ispurchaser]id="sellerCompanyName" name="sellerCompanyName" value="${queryParam.sellerCompanyName!}"
			                     [#else]id="buyerCompanyName" name="buyerCompanyName" value="${queryParam.buyerCompanyName!}"[/#if]/>
			            </span>
			            [#if ispurchaser]
                            <span>来源公司：
                                <select name="buyerCompanyId" id="buyerCompanyId">
                                    <option value="">全部</option>
                                    [#list childCompanyWithSelf as c]
                                        <option value="${c.id}" [#if queryParam.buyerCompanyId?? && c.id?string == queryParam.buyerCompanyId!]selected[/#if]>[#if c_index == 0]本公司[#else]${c.companyName}[/#if]</option>
                                    [/#list]
                                </select>
                            </span>
			            [/#if]
			            <span>下单日期：<input type="text" id="sdate" name="sdate" value="${queryParam.sdate!}" class="orderInput dateInput" /> - <input type="text" id="edate" name="edate" value="${queryParam.edate!}" class="orderInput dateInput" /></span>
	                	<a href="javascript:search()">搜索</a>
	                </div>
                </form>
                <table class="titleTable">
                    <tbody>
                    <tr style="background-color: #f8f8f8;">
                        <td width="65%">商品名称</td>
                        <td width="10%">金额</td>
                        <td width="10%">订单状态</td>
                        <td width="15%">[#if queryParam.tab == 3]失败原因[#else]操作[/#if]</td>
                    </tr>
                    </tbody>
                </table>
                [#if list?? && list?size > 0]
                    <div class="dataTable">
                    [#list list as data]
                    <table data-orderId='${data.orderId!}' data-buyerCompanyId="${data.buyerCompanyId!}" data-buyerUserId="${data.buyerUserId!}"
                           data-sellerCompanyId="${data.sellerCompanyId!}" data-sellerUserId="${data.sellerUserId!}">
                        <tbody>
                        <tr>
                            <th colspan="5">
	                            <div class="alltd">
                                    [#if ispurchaser && data.parentBuyerCompanyId??]<img src="/res/images/unit/fen.png" alt=""/>[/#if]
                                    下单时间：${(data.ordertime?string("yyyy-MM-dd HH:mm:ss"))!}　　订单号：${data.orderNumber!} &nbsp; &nbsp; &nbsp;
	                            	<div class="cname">
                                        [#if ispurchaser]
                                            卖家：[@content_cut content=data.sellerCompanyName! len=20 ending="..." /]
                                            &nbsp; &nbsp; &nbsp;
                                            买家：[#if data.topCompany??]${data.topCompany.companyName!}[#else]${data.buyerCompanyName!}[/#if]
                                        [#else]
                                            [#if data.topCompany??]
                                                买家：${data.topCompany.companyName!}&nbsp; &nbsp; &nbsp;分公司：${data.buyerCompanyName!}
                                                [#else]
                                                买家：${data.buyerCompanyName!}
                                            [/#if]
                                        [/#if]
	                            		<div></div>
	                            	</div>
	                            </div>
	                         </th>
                        </tr>

                        [#list data.productList as pro]
                        <tr>
                            <td width="65%" style="position: relative;">
                                <p class="name" title="${pro.productName!}" style="position: absolute;top: 15px;">
                                    <img src="${pro.fstPic!}" width="45px" height="45px" style="margin-right: 5px;" alt="">
                                </p>
                                <span class="introCar">
                                        <a href="/offer/${pro.productId!}.html" target="_blank" style="vertical-align: top;">
                                        ${pro.productName!}                                       </a>
                                        <em title="${pro.skuStr!}">${pro.skuStr!}</em>
                                    </span>
                            </td>
                            [#if pro_index == 0]
                            <td width="10%" rowspan="${data.productList?size}">
                                <b class="orange">￥${data.totalPrice!?string('0.00')}</b>
                                [#if data.ifBatchPay?? && data.ifBatchPay == 1 && queryParam.tab == 2]
                                    <div class="pici">
                                        <span class="pname" data-tip="batchPay">分批</span>
                                        <div class="pcdown">
                                            <img src="/res/third/nice-validator/images/loading.gif" alt="loading"/>
                                        </div>
                                    </div>
                                [/#if]
                            </td>
                            <td width="10%" rowspan="${data.productList?size}">
                                <p>
                                    [#if queryParam.tab == 1]
                                        待支付
                                    [#elseif queryParam.tab == 2]
                                        已支付
                                    [#elseif queryParam.tab == 3]
                                        支付失败
                                    [/#if]
                                </p>
                                [#if ispurchaser]<p><a href="/order/payDetail/${data.orderId!}" target="_blank">详情</a></p>[/#if]
                            </td>
                            <td width="15%" rowspan="${data.productList?size}">
                                [#if ispurchaser]
                                    [#if queryParam.tab == 1]
                                        <a href="/order/pay_on/${data.orderId!}/${data.payId!}" class="btn" target="_Blank">立即支付</a>
                                    [#elseif queryParam.tab == 3]
                                        ${data.rejectReason!}
                                    [/#if]
                                [#else]
                                    <a href="/order/payDetail/${data.orderId!}" class="btn" target="_Blank">查看</a>
                                [/#if]
                            </td>
                            [/#if]
                        </tr>
                        [/#list]

                        </tbody>
                    </table>
                    [/#list]
                    </div>
                    <div class="backpage">
                    共${page.total!}条记录<span class="orange">${page.pageNum!}</span> / ${page.pages!}
                        <p>
                            <input type="text" id="gotoPage"/>
                            <a href="javascript:void(0)" class="go" onclick="goto($('#gotoPage').val())">GO</a>
                        </p>
                        <div class="pnt">
                            <a href="javascript:void(0)" class="prev" onclick="pre()"></a>
                            <a href="javascript:void(0)" class="next" onclick="next()"></a>
                        </div>
                    </div>
                [#else]
                    <div style="text-align: center">当前没有任何财务信息~</div>
                [/#if]
            </div>
        </div>
    </div>

    [#include "/front/common/front_footerAzt.html"]
</div>

<!-- 公司信息悬浮框Template -->
<script type="text/html" id="companyTip">
    <div class="tan-companyInfo" style="width:280px;  [#if !ispurchaser][: if(this.isChild==true) { :] left:218px;[: }:][/#if]" >
        <div style="text-align: center; padding-top: 35px;[: if(this.companyName?true : false) { :] display: none; [: } :]">
            <img src="/res/third/nice-validator/images/loading.gif" alt="loading"/>
        </div>
        <div [: if(this.companyName?false : true) { :] style="display: none;" [: } :]>
            <em></em>
            <div class="pic"><img src="[:=this.logo||'/res/images/temppic2.jpg':]" alt="" /></div>
            <div class="des">
                <p style="white-space: nowrap">[:=this.companyName||'':]</p>
                <p>[:=this.regProvince||'':] [:=this.regCity||'':]</p>
                <p>[:=this.userName||'':]     [:=this.contact||'':]</p>
            </div>
        </div>
    </div>
</script>

<!-- 分批支付悬浮框Template -->
<script type="text/html" id="batchPayTip">
    <div class="pctitle">分批付款</div>
    <em></em>
    <ul>
        [: for(var i = 0, len = list.length; i < len; i++) { :]
        <li class="[: if(i != len - 1) { :]first[: } :][: if(i == len - 1) { :]on[: } :]">
            <div class="num"><i></i><span>[:= i + 1 :]</span></div>
            <p class="price"><span class="orange">¥[:=list[i].payPrice.toFixed(2):]</span></p>
            [: if(list[i].payResult == 1) { :]
            <p>支付凭证审核中</p>
            [: } else if(list[i].payResult == 3) { :]
            <p>待复核</p>
            [: } :]
            <p>[:=list[i].payTime:]</p>
        </li>
        [: } :]
    </ul>
</script>

<!-- 提醒 -->
<div class="tanbox tanTip" style="display:none;">
    <div class="tanbg"></div>
    <div class="box" style="width:400px;">
        <span class="closed" onclick="close()"></span>
        <div class="cont">
            <div class="des">
                <h4>提醒</h4>
                <p>无法支付，该订单存在异常。</p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/res/js/common/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/res/js/structure/struture.js"></script>
<script type="text/javascript" src="/res/js/common/common.js"></script>
<script type="text/javascript" src="/res/third/laydate/laydate.js"></script>
<script type="text/javascript" src="/res/third/layer/layer.js"></script>
<script type="text/javascript" src="/res/js/common/tppl.js"></script>
<script type="text/javascript" src="/res/third/nice-validator/jquery.validator.min.js?local=zh-CN"></script>
<script type="text/javascript">
	var companyTipId = '';     //要展示公司tip的订单id（防止同一时间出现两个tip）

    $(function(){
    	initTab();
    	initDate();
    	initCompanyTip();
    	initBatchPayTip()
		$(".back-main .inner").css("minHeight",$(window).height()-200);

        function autoside(){
            $('.back-side').height($(window).height()-48);
            $('.warp').css('minHeight',$(window).height()-48);
        }

        $(window).resize(function(){
            autoside()
        }).trigger('resize');
    })
    
    function close(){
    	$('.tanbox').hide()
    }
    
  //展示公司信息tip信息
    function initCompanyTip() {
        $('.dataTable .alltd .cname').hover(function() {
            [#if ispurchaser]
                var companyId = $(this).parents('table').attr('data-sellerCompanyId');
                var userId = $(this).parents('table').attr('data-sellerUserId');
            [#else]
                var companyId = $(this).parents('table').attr('data-buyerCompanyId');
                var userId = $(this).parents('table').attr('data-buyerUserId');
            [/#if]
            var container = $(this).find('div');
            companyTipId = $(this).parents('table').attr('data-orderid');
            ifChildBuy = $(this).parents('table').attr('data-ifChildBuy');
            //首先显示loading
            if(ifChildBuy == 'true'){
            	container.html(tppl($('#companyTip').html(), {isChild : true}));
            }else{
            	container.html(tppl($('#companyTip').html(), {isChild : false}));
            }

            $.ajax({
                url : '/order/loadCompanyTip',
                type : 'post',
                dataType : 'json',
                cache : true,
                data : {orderId : companyTipId, companyId : companyId, userId : userId, type : 'product'},
                success : function(obj) {
                    if(obj.success) {
                        var data = obj.obj;
                        if(data.orderId == companyTipId) {
                            //保证同一时间只出现一个
                            data.isChild = (ifChildBuy == 'true');
                            container.html(tppl($('#companyTip').html(), data)); 
                        } else {
                            container.html('');
                        }
                    }
                }
            });

        },function() {
            companyTipId = '';
            $(this).find('div').html('');
        });
    }
    
    //公司信息
    function initHover(){
        var $tan_companyInfo = $('.tan-companyInfo');
        $('.dataTable .alltd .cname').hover(function(){
        	var companyid= 
            $(this).append($tan_companyInfo);
        },function(){
            $(this).find($tan_companyInfo).remove();
        });
    }
    
  //分批支付Tip
    function initBatchPayTip() {
        $('.pname[data-tip=batchPay]').hover(function() {
            var $container = $(this).parent().find('.pcdown');
            if($container.find('ul').length > 0) {
                //已经加载过，不再加载
                return;
            }
            var orderId = $(this).parents('table').attr('data-orderId');
            $.ajax({
                url : '/order/loadBatchPayTip',
                type : 'post',
                dataType : 'json',
                data : {orderId : orderId},
                success : function(data) {
                    if(data.success) {
                        $container.html(tppl($('#batchPayTip').html(), data.obj));
                    }
                    var sz=$container.find("li").length;  
                    $container.find("ul").width(130*sz); 
                    $container.find("em").css("left",130*sz+20);
                }
            });
        }, function() {
        });
    }
    //tab绑定点击事件
    function initTab() {
        $('li[data-tab]').on('click', function() {
            var tab = $(this).attr('data-tab');
            $('#tab').val(tab);
            $('#orderPayForm input').not(':hidden').val('');
            $('#buyerCompanyId').val("");
            search();
        });
    }
    
   	//日期选择控件初始化
    function initDate() {
        var start = {
            elem: '#sdate',
            format: 'YYYY-MM-DD',
        [#if queryParam.edate??]
            max : '${queryParam.edate}',
        [/#if]
            choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas;//将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#edate',
            format: 'YYYY-MM-DD',
        [#if queryParam.sdate??]
            min : '${queryParam.sdate}',
            start : '${queryParam.sdate}',
        [/#if]
            choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    }
    
    function search() {
        $('#pageNo').val(1);
        $('#orderPayForm').submit();
    }

    function next() {
        goto(Number($('#pageNo').val()) + 1);
    }

    function pre() {
        goto(Number($('#pageNo').val()) - 1);
    }

    function goto(pageNo) {
        if(pageNo >= 1 && pageNo <= ${page.pages!}) {
            $('#pageNo').val(pageNo);
            $('#orderPayForm').submit();
        }
    }

    function checkPay(orderId) {
        $.ajax({
            url : '/order/checkPay',
            type : 'post',
            dataType : 'json',
            async : false,
            data : {orderId : orderId},
            beforeSend : function() {
                layer.load(2, {shade: 0.1});
            },
            success : function(data) {
                if(data.success) {
                    var url = '/order/pay/' + orderId + '/' + data.obj;
                    window.open(url);   //todo 浏览器拦截
                } else {
                    layer.alert(data.msg);
                }
            },
            complete : function() {
                layer.closeAll('loading');
            }
        })
    }
</script>
</body>
</html>
